<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer.html">

<x-trivial></x-trivial>

<style>

  x-trivial {
    display: block;
    padding: 8px;
  }

</style>

<script>

  Polymer({

    is: 'x-trivial',

    ready: function() {
      this.innerHTML = '<i>Hey</i>, is this script <b>on</b>?';
    }

  });

</script>

<!----------------------------------------------------------------------------->

<x-has-template></x-has-template>

<style>

  x-has-template {
    display: block;
    padding: 8px;
  }

</style>

<template>
  <i>Hey</i>, is this template <b>on</b>?  
</template>

<script>

  Polymer({

    is: 'x-has-template'

  });

</script>

<!----------------------------------------------------------------------------->

<x-has-projection>content</x-has-projection>

<style>

  x-has-projection {
    display: block;
    padding: 8px;
  }

</style>

<template>
  <i>Hey</i>, is this <content></content> <b>on</b>?  
</template>

<script>

  Polymer({

    is: 'x-has-projection'

  });

</script>

<!----------------------------------------------------------------------------->

<x-has-reprojection>reprojection</x-has-reprojection>

<style>

  x-has-reprojection {
    display: block;
  }

</style>

<template>
  <x-has-projection><content></content></x-has-projection>
</template>

<script>

  Polymer({

    is: 'x-has-reprojection'

  });

</script>

<!----------------------------------------------------------------------------->

<div is="x-extended-div"></div>

<style>

  [is=x-extended-div] {
    display: block;
    padding: 8px;
  }

</style>

<template>
  <i>Hey</i>, is this extension <b>on</b>?  
</template>

<script>

  Polymer({

    is: 'x-extended-div',

    extends: 'div'

  });

</script>

<!----------------------------------------------------------------------------->

<x-annotated></x-annotated>

<style>

  x-annotated {
    display: block;
    padding: 8px;
  }

</style>

<template>
  <i>Hey</i>, is this <span id="kind"></span> <b>on</b>?  
</template>

<script>

  Polymer({

    is: 'x-annotated',

    ready: function() {
      this.$.kind.textContent = 'annotation';
    }

  });

</script>

<!----------------------------------------------------------------------------->

<x-attributes attribute="attribute"></x-attributes>

<style>

  x-attributes {
    padding: 8px;
  }

</style>

<template>
  <i>Hey</i>, is this <span id="kind"></span> <b>on</b>?  
</template>

<script>

  Polymer({

    is: 'x-attributes',

    hostAttributes: 'block',

    properties: {
      attribute: String
    },

    set attribute(attribute) {
      this.$.kind.textContent = attribute;
    }

  });

</script>